<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue-resource 发起get\post\jsonp请求</title>
<style type="text/css">

</style>
</head>
<body>



<div id="app">

    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonP请求" @click="jsonPInfo">

</div>


<!-- 
get请求
post请求
jsons请求

http://vue.studyit.io/api/getlunbo
http://vue.studyit.io/api/post
http://vue.studyit.io/api/jsonp

http://www.liulongbin.top:3005/api/getlunbo
http://www.liulongbin.top:3005/api/post
http://www.liulongbin.top:3005/api/jsonp


 -->



<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
  	
  },

  methods:{
    getInfo(){
      this.$http.get("http://www.liulongbin.top:3005/api/getlunbo").then(function(resule){
          console.log(resule.body)
      })
    },

    postInfo(){
      //手动发起的post 请求默认没有表单格式，所以有的服务器可能处理不了
      //解决办法是设置post的第三个参数，设置提交的内容类型伟普通表单数据格式
      //参数1：url地址，参数2：提交服务器的数据，参数3：提交服务器的内容格式（此时为普通表单格式）
      this.$http.post("http://www.liulongbin.top:3005/api/post",{},{emulateJSON:true}).then(result =>{console.log(result.body)
      })
    },

    jsonPInfo() {
      this.$http.jsonp("http://www.liulongbin.top:3005/api/jsonp").then(result =>{
        console.log(result.body)
      })
    }
  	


  }

})





</script>

	
</body>
</html>